<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .class2{
        color: red;
    }
    .table-bg{
        background-color: #a5a3a3;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-if="showDiv" :class="{'class1':true,'class2':id,'class3':true}">{{message}}</div>
  <div v-show="showDiv" :class="{'class1':true,'class2':id,'class3':true}">{{message}}</div>

  <div>{{reverseMsg}}</div>
  <div>{{count}}</div>
  <div>
    <input type="text" v-model="user.name">
  </div>
  <div>
    <input type="text" @keyup.enter="alert('提交')" v-model="message">
  </div>
  <ul>
    <li v-for="c in list">{{c}}</li>
  </ul>
  <table @click="alert('table')">
    <thead>
      <th v-for="title in titles">{{title}}</th>
    </thead>
    <tbody>
      <tr v-for="(item,index) in tableData" :class="index%2==0?'table-bg':''">
        <td>{{item.dep}}</td>
        <td>{{item.q1}}</td>
        <td>{{item.q2}}</td>
        <td>{{item.q3}}</td>
        <td>{{item.q4}}</td>
        <td><button @click.stop="alert('item')">总和</button></td>
      </tr>
    </tbody>
  </table>
</div>

</body>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
  let App = {
    data(){
      return {
        showDiv:false,
        id:false,
        message:'class',
        msg:'hello world',
        count: 0,
        list:["a","b","c","d"],
        user:{name:"cloud"},
        titles:["","第一季度","第二季度","第三季度","第四季度","操作"],
        tableData:[
          {'dep':'食品部','q1':232,'q2':2423,'q3':5454,'q4':454},
          {'dep':'食品部','q1':232,'q2':2423,'q3':5454,'q4':454},
          {'dep':'食品部','q1':232,'q2':2423,'q3':5454,'q4':454},
          {'dep':'食品部','q1':232,'q2':2423,'q3':5454,'q4':454},
          {'dep':'食品部','q1':232,'q2':2423,'q3':5454,'q4':454}
        ]

      }
    },
    watch:{
      count(newVal,oldVal){
        console.log("old:"+oldVal+"   new:"+newVal);
        if(newVal == 10){
          this.list = ["A","B","C","D","E"];
          this.user = {name:'cloud'}
          this.reverseMsg="cloud";
        }
      }
    },
    computed:{
      reverseMsg:{
        get(){
          return this.user.name.split("").reverse().join("");
        },
        set(nv){
          console.log(nv);
        }

      }
    },
    methods:{
      rever(){
        console.log("invoke method");
        return this.user.name.split("").reverse().join("");
      },
      sum(event){
        console.log(event);
        // let val =  item.q1+item.q2+item.q3+item.q4;
        // alert(val);
      },
      alert(msg){
        alert(msg);
      },

      start(){
        // setInterval(function(){
        //   this.count++;
        //   if(this.count ==10){
        //     this.list = ["A","B","C","D","E"];
        //     this.user = {name:'cloud'}
        //   }
        // },1000);
        setInterval(()=>{
          this.count++;
        },1000);
      }
    },
    created(){
      this.start();
    }
  }
  Vue.createApp(App).mount("#app");
</script>
</html>